<template>
    <div class="my-integral">
        <div  class="content-integral">
            <div class="bg-white">
                <div class="user-icon">
                    <img style="float: left;" class="round_icon" :src="userInfo.headImgUrl"/>
                    <div class="icon-title font" >{{userInfo.nickname}}</div>
                    <div class="icon-title font">
                        <div style="font-size: 15px;">
                            <div style="width: 50%;display: inline-block;">
                                <span>当前积分：</span>
                                <span style="color: red">{{myIntegral}}</span>
                            </div>
                            <div style="width: 45%;display: inline-block;text-align: right" >
                                <van-button class="integral-btn" type="default" round @click="goToView('/integrallist')">兑换积分</van-button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-gray item_integrallist">
                <div v-show="dataShow" class="integral-box" v-for="item,key in integralList" :key="key" >
                    <div class="integral-box-up">
                        <li>
                            <span class="logo">|</span>
                            <span class="month">{{item.month}}</span>
                            <span class="income">使用：{{item.use}}</span>
                            <span class="income">获取：<span style="color: orange">{{item.income}}</span></span>
                        </li>
                    </div>
                    <div class="integral-box-down" v-for="it,key in item.monthList" :key="key" >
                        <div style="padding:15px 0;">
                            <van-row>
                                <van-col span="16">
                                    <div class="left-font-up">{{it.describe}}</div>
                                    <div class="left-font-down">{{it.createDate}}</div>
                                </van-col>
                                <van-col span="8">
                                    <div class="right-font" :class="it.num > 0?'orange':'gray'">{{it.score}}</div>
                                </van-col>
                            </van-row>


                        </div>
                    </div>
                </div>

                <div class="nodataShow" v-show="nodataShow">
                    暂未获取到积分，加油！
                </div>

            </div>
        </div>
    </div>
</template>

<script>
    import {mapState} from "vuex"
    import Cookies from 'js-cookie'
    import dayjs from 'dayjs'
    export default {
        name: "MyIntegral",
        data(){
            return{
                token:'',
                myIntegral:'',
                integralList:[
                    {
                        month:'',
                        use:0,
                        income:0,
                        monthList:[{
                            createDate:'',
                            describe:'',
                            score:'',
                            num:0
                        }]
                    }
                ],
                dataShow:true,
                nodataShow:false
            }
        },
        created(){
            this.token = Cookies.get('token')
            this.$api.personInf.personInfo({openid:this.token}).then(res=>{
                if(res.code==0){
                    var data = JSON.parse(res.data)
                    var success = data.success
                    if(!success) {
                        Toast('获取数据失败！')
                        return
                    }
                    this.myIntegral = data.score
                }
            }).catch(err=>{
                console.log(err)
            })
            this.fetchIntegralList()
        },
        computed:{
            ...mapState({
                userInfo:state=>state.user.userInfo
            })
        },
        methods:{
            fetchIntegralList(){
                this.$api.integral.integralList({openid:this.token}).then(res=>{
                    if(res.code==0){
                        var monthJson = []
                        var monthAray = new Array()
                        var monthIndex = 0
                        for (var i=0;i<res.data.length;i++){
                            var month = dayjs(res.data[i].createDate).format('YYYY-MM')
                            var score = res.data[i].score
                            var createDate = res.data[i].createDate
                            var describe = res.data[i].describe
                            /*月份匹配*/
                            if(monthAray.indexOf(month) == -1){
                                var row = {}
                                row.month = month
                                monthJson.push(row)
                                monthAray[monthIndex] = month
                                monthIndex ++
                            }
                            /*分数匹配*/
                            for(var m=0;m<monthJson.length;m++){
                                if(monthJson[m].month == month){
                                    if(score > 0){
                                        if(monthJson[m].income == undefined){
                                            monthJson[m].income = score.substring(1)
                                            monthJson[m].use = 0
                                        }else{
                                            monthJson[m].income = Number(monthJson[m].income) + Number(score.substring(1))
                                        }
                                    }else{
                                        if(monthJson[m].use == undefined){
                                            monthJson[m].income = 0
                                            monthJson[m].use = score.substring(1)
                                        }else{
                                            monthJson[m].use = Number(monthJson[m].use) + Number(score.substring(1))
                                        }
                                    }

                                    /*详细数据分配*/
                                    if(monthJson[m].monthList == undefined){
                                        var monthList = []
                                    }else{
                                        var monthList = monthJson[m].monthList
                                    }
                                    var row = {}
                                    row.createDate = createDate
                                    row.describe = describe
                                    row.score = score
                                    if(score.indexOf('+') != -1){
                                        row.num = score.substring(1)
                                    }else{
                                        row.num = score
                                    }
                                    monthList.push(row)
                                    monthJson[m].monthList = monthList
                                }
                            }
                        }
                        this.integralList = monthJson
                        console.log(this.integralList)
                    }else{
                        this.nodataShow = !this.nodataShow
                        this.dataShow = !this.dataShow
                        console.log(res.msg)
                    }
                })
            },
            goToView(path){
                this.$router.push(path)
            }
        }
    }
</script>

<style lang="less" >
    @import "../../assets/less/base";
    .orange{
        color: orange;
    }
    .gray{
        color: gray;
    }
    .integral-btn{
        background-color:@main-theme-color;
        color: #FFFFFF;
    }
    .van-button--round {
        border-radius: 0.8em;
    }
    .nodataShow{
        text-align: center;
        color: #bbbbbb;
        font-size: 15px;
        margin-top: 40px;
    }
    .my-integral{
        background-color: #FFFFFF;
        .content-integral{
            .bg-white{
                padding-bottom: 10px;
                background-color:@main-theme-color;
                .user-icon {
                    text-align: left;
                    padding: 20px 0 0 20px;
                    .round_icon {
                        width: 65px;
                        height: 65px;
                        border-radius: 50%;
                        align-items: center;
                        justify-content: center;
                        overflow: hidden;
                    }
                    .icon-title {
                        color: #FFFFFF;
                        font-size: 17px;
                    }
                    .font {
                        padding-left: 80px;
                        margin-top: 5px;
                    }
                }
            }
            .item_integrallist{
                &.bg-gray{
                    padding-top: 0px;
                }
                .integral-box {
                    margin: 2%;
                    border: 1px solid #e0e8f3;
                    .integral-box-up {
                        border-bottom: 1px solid #e0e8f3;
                        li {
                            line-height: 50px;
                            list-style-type: none;
                        }
                        .logo {
                            color: #0d88e8;
                            font-size: 15px;
                            margin-left: 3%;
                            font-weight: bold;
                            display: inline-block;
                        }
                        .month {
                            font-size: 15px;
                            margin-left: 2%;
                        }
                        .income {
                            font-size: 15px;
                            float: right;
                            margin-right: 2%;
                        }
                    }
                    .integral-box-down {
                        border-bottom: 1px solid #e0e8f3;
                        .left-font-up{
                            font-size: 14px;
                            margin-left: 5%;
                            padding-bottom: 5px;
                        }
                        .left-font-down{
                            font-size: 12px;
                            margin-left: 5%;
                            color: gray;
                        }
                        .right-font {
                            margin-right: 9%;
                            float: right;
                            font-size: 14px;
                            line-height: 35px;
                        }
                    }
                    .integral-box-down:last-child{
                        border-bottom: none;
                    }
                }
            }
        }
    }
</style>
